<template>
    <div>
        <el-switch
            v-if="field.prop"
            v-bind="field.switchAttr"
            @change="onChange"
            :model-value="cellValue"
            :loading="loading"
            active-value="1"
            inactive-value="0"
        />
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx } from 'element-plus'
import { ref } from 'vue'
import { getCellValue } from '/@/components/table/index'

interface Props {
    row: TableRow
    field: TableColumn
    column: TableColumnCtx<TableRow>
    index: number
}

const loading = ref(false)
const props = defineProps<Props>()
const cellValue = ref(getCellValue(props.row, props.field, props.column, props.index))

if (typeof cellValue.value === 'number') {
    cellValue.value = cellValue.value.toString()
}

const onChange = (value: string | number | boolean) => {
    loading.value = true
    setTimeout(() => {
        cellValue.value = value
        loading.value = false
    }, 500)
}
</script>
